<template>
  <div>
    <div class="search-bar">
      <span class="label">统计时间</span>
      <el-date-picker
        size="mini"
        v-model="timeVal"
        type="daterange"
        :format="dateForm()"
        :value-format="dateForm()"
        placeholder="选择日期"
        :clearable="false"
      >
      </el-date-picker>
      <!-- <span class="label-text">部门</span>
      <el-select
        v-model="deptList"
        multiple
        collapse-tags
        placeholder="请选择部门"
      >
        <el-option
          size="mini"
          v-for="item in deptOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <el-button class="search-btn" size="mini" @click="toSearch"
        >查询</el-button
      >
      <el-button class="search-btn" size="mini" @click="toExport"
        >导出Excel</el-button
      >
    </div>
    <el-table
      stripe
      id="table"
      ref="table"
      :data="tableData"
      border
      style="width: 100%"
      :height="tableHeight"
      class="el-table"
    >
      <el-table-column prop="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="deptName" label="部门"> </el-table-column>
      <el-table-column prop="equipment1" label="1#机组"> </el-table-column>
      <el-table-column prop="equipment2" label="2#机组"> </el-table-column>
      <el-table-column prop="equipment3" label="3#机组"> </el-table-column>
      <el-table-column prop="equipment4" label="4#机组"> </el-table-column>
      <el-table-column prop="equipment5" label="5#机组"> </el-table-column>
      <el-table-column prop="equipment6" label="6#机组"> </el-table-column>
      <el-table-column prop="equipment7" label="7#机组"> </el-table-column>
      <el-table-column prop="equipment8" label="8#机组"> </el-table-column>
      <el-table-column v-if="currDs === 'water_03'" prop="equipment9" label="9#机组"> </el-table-column>
      <el-table-column v-if="currDs === 'water_03'" prop="equipment10" label="10#机组"> </el-table-column>
      <el-table-column prop="all" label="合计"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { unitRunTime } from "@/api/operationManagement/runStatistical.js";
export default {
  data() {
    return {
      deptOptions: [],
      timeVal: [],
      deptList: [],
      tableData: [],
      tableHeight: 0,
      currDs: ''
    };
  },
  created() {
    this.init();
    this.currDs = localStorage.getItem('currDs')
  },
  mounted() {
    this.adjustSize();
    window.addEventListener("resize", this.adjustSize);
  },
  methods: {
    adjustSize() {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight - this.$refs.table.$el.offsetTop - 200;
        //window.innerHeight:浏览器的可用高度
        //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
        //后面的50：根据需求空出的高度，自行调整
      });
    },
    //获取当月第一天或最后一天的日期
    getFirstOrLastDay(flag) {
      let y = new Date().getFullYear(); //获取年份
      let m = new Date().getMonth() + 1; //获取月份
      let d = new Date(y, m, flag).getDate();
      m = m < 10 ? "0" + m : m; //月份补 0
      d = d < 10 ? "0" + d : d; //日数补 0
      return [y, m, d].join("-");
    },
    init() {
      let nowFirst = this.getFirstOrLastDay(1);
      let nowLast = this.getFirstOrLastDay(0);
      this.timeVal = [nowFirst, nowLast];
      this.toSearch();
    },
    // 查询
    async toSearch() {
      let obj = {
        beginDay: this.timeVal[0],
        endDay: this.timeVal[1],
        // deptList: this.deptList,
      };
      await unitRunTime(obj).then((res) => {
        if (res.code == 200) {
          this.tableData = [];
          let list = [];
          this.deptOptions = [];
          res.data.forEach((item, index) => {
            let option = {
              label: item.deptManageName,
              value: item.deptManage,
            };
            this.deptOptions.push(option);
            let obj = {};
            for (let i = 1; i < item.det.length; i++) {
              obj["equipment" + i] = item.det[i - 1].machineHour;
            }
            (obj.index = index + 1),
              (obj.deptName = item.deptManageName),
              (obj.all = item.det[item.det.length - 1].machineHour);
            list.push(obj);
          });
          this.tableData = list;
        }
      });
    },
    // 导出Excel
    toExport() {
      let table = document.getElementById("table");
      let excelContent = table.innerHTML;
      let excelFile =
        "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:" +
        "excel" +
        "' xmlns='http://www.w3.org/TR/REC-html40'>";
      excelFile += "<head>";
      excelFile += "<!--[if gte mso 9]>";
      excelFile += "<xml>";
      excelFile += "<x:ExcelWorkbook>";
      excelFile += "<x:ExcelWorksheets>";
      excelFile += "<x:ExcelWorksheet>";
      excelFile += "<x:Name>";
      excelFile += "{worksheet}";
      excelFile += "</x:Name>";
      excelFile += "<x:WorksheetOptions>";
      excelFile += "<x:DisplayGridlines/>";
      excelFile += "</x:WorksheetOptions>";
      excelFile += "</x:ExcelWorksheet>";
      excelFile += "</x:ExcelWorksheets>";
      excelFile += "</x:ExcelWorkbook>";
      excelFile += "</xml>";
      excelFile += "<![endif]-->";
      excelFile += "</head>";
      excelFile += "<body>";
      excelFile += excelContent;
      excelFile += "</body>";
      excelFile += "</html>";
      let base64data = "base64," + this.base64(excelFile);
      let fileName = "机组运行台时"; //下载的文件名称
      let prefix = "data:application/vnd.ms-excel;" + base64data;
      let a = document.createElement("a"); //创建a标签
      a.setAttribute("href", prefix);
      a.setAttribute("download", fileName);
      a.setAttribute("target", "_blank"); //打开一个新的窗口
      a.setAttribute("id", "downLoad");
      if (document.getElementById("downLoad")) {
        document.body.removeChild(document.getElementById("downLoad"));
      }
      document.body.appendChild(a);
      a.click();
    },
    base64(content) {
      return window.btoa(unescape(encodeURIComponent(content)));
    },
    //日期数据处理
    dateForm() {
      return "yyyy-MM-dd";
    },
  },
};
</script>
<style lang="less" scoped>
.search-bar {
  text-align: left;
  padding-bottom: 10px;
  .label {
    padding: 0 20px;
  }
  .label-text {
    padding: 0 20px;
  }
  .label::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
  .search-btn {
    margin-left: 20px;
  }
}
</style>